React Render: Komponentų Atvaizdavimas ir Gyvavimo Ciklo Valdymas

„React“, populiari „JavaScript“ biblioteka, skirta vartotojo sąsajoms kurti, remiasi efektyviu atvaizdavimo procesu, kad rodytų ir atnaujintų komponentus. Supratimas, kaip „React“ atvaizduoja komponentus, valdo jų gyvavimo ciklus ir optimizuoja našumą, yra labai svarbus kuriant patikimas ir plečiamas programas. Šiame išsamiame vadove šios sąvokos nagrinėjamos išsamiai, pateikiant praktinių pavyzdžių ir geriausių praktikų programuotojams visame pasaulyje.

„React“ Atvaizdavimo Proceso Supratimas

„React“ veikimo pagrindas yra jo komponentais pagrįsta architektūra ir virtualus DOM. Kai pasikeičia komponento būsena ar „props“, „React“ tiesiogiai nemanipuliuoja tikruoju DOM. Vietoj to, jis sukuria virtualų DOM atvaizdą, vadinamą virtualiu DOM. Tada „React“ palygina virtualų DOM su ankstesne versija ir nustato minimalų pakeitimų rinkinį, reikalingą tikrajam DOM atnaujinti. Šis procesas, žinomas kaip sulyginimas (reconciliation), žymiai pagerina našumą.

Virtualus DOM ir Sulyginimas

Virtualus DOM yra lengvas, atmintyje saugomas tikrojo DOM atvaizdas. Juo manipuliuoti yra daug greičiau ir efektyviau nei tikruoju DOM. Kai komponentas atsinaujina, „React“ sukuria naują virtualaus DOM medį ir palygina jį su ankstesniu medžiu. Šis palyginimas leidžia „React“ nustatyti, kuriuos konkrečius mazgus tikrajame DOM reikia atnaujinti. Tada „React“ pritaiko šiuos minimalius atnaujinimus tikrajam DOM, todėl atvaizdavimo procesas tampa greitesnis ir našesnis.

Apsvarstykite šį supaprastintą pavyzdį:

Scenarijus: Mygtuko paspaudimas atnaujina ekrane rodomą skaitiklį.

Be „React“: Kiekvienas paspaudimas gali sukelti pilną DOM atnaujinimą, iš naujo atvaizduojant visą puslapį ar dideles jo dalis, o tai lemia lėtą veikimą.

Su „React“: Atnaujinama tik skaitiklio vertė virtualiame DOM. Sulyginimo procesas nustato šį pakeitimą ir pritaiko jį atitinkamam mazgui tikrajame DOM. Likusi puslapio dalis lieka nepakitusi, todėl užtikrinama sklandi ir greitai reaguojanti vartotojo patirtis.

Kaip „React“ Nustato Pakeitimus: Skirtumų Nustatymo Algoritmas

„React“ skirtumų nustatymo algoritmas (diffing algorithm) yra sulyginimo proceso pagrindas. Jis palygina naują ir seną virtualaus DOM medžius, kad nustatytų skirtumus. Algoritmas daro kelias prielaidas, siekdamas optimizuoti palyginimą:

• Du skirtingų tipų elementai sukurs skirtingus medžius. Jei šakniniai elementai yra skirtingų tipų (pvz., keičiant <div> į <span>), „React“ išmontuos seną medį ir sukurs naują nuo nulio.
• Lyginant du to paties tipo elementus, „React“ žiūri į jų atributus, kad nustatytų, ar yra pakeitimų. Jei pasikeitė tik atributai, „React“ atnaujins esamo DOM mazgo atributus.
• „React“ naudoja „key“ savybę (prop), kad unikaliai identifikuotų sąrašo elementus. Pateikus „key“ savybę, „React“ gali efektyviai atnaujinti sąrašus, neatvaizduodamas viso sąrašo iš naujo.

Šių prielaidų supratimas padeda programuotojams rašyti efektyvesnius „React“ komponentus. Pavyzdžiui, naudojant raktus (keys) atvaizduojant sąrašus, našumas yra labai svarbus.

„React“ Komponento Gyvavimo Ciklas

„React“ komponentai turi aiškiai apibrėžtą gyvavimo ciklą, kurį sudaro eilė metodų, iškviečiamų tam tikruose komponento egzistavimo etapuose. Šių gyvavimo ciklo metodų supratimas leidžia programuotojams kontroliuoti, kaip komponentai yra atvaizduojami, atnaujinami ir išmontuojami. Įdiegus „Hooks“, gyvavimo ciklo metodai vis dar yra aktualūs, o jų pagrindinių principų supratimas yra naudingas.

Gyvavimo Ciklo Metodai Klasių Komponentuose

Klasėmis pagrįstuose komponentuose gyvavimo ciklo metodai naudojami kodui vykdyti skirtinguose komponento gyvavimo etapuose. Štai pagrindinių gyvavimo ciklo metodų apžvalga:

• constructor(props): Iškviečiamas prieš komponento prijungimą. Jis naudojamas būsenai (state) inicializuoti ir įvykių doroklėms (event handlers) priskirti.
• static getDerivedStateFromProps(props, state): Iškviečiamas prieš atvaizdavimą, tiek pradinio prijungimo, tiek vėlesnių atnaujinimų metu. Jis turėtų grąžinti objektą būsenai atnaujinti arba null, jei nauji „props“ nereikalauja jokių būsenos atnaujinimų. Šis metodas skatina nuspėjamus būsenos atnaujinimus, pagrįstus „props“ pasikeitimais.
• render(): Privalomas metodas, grąžinantis JSX atvaizdavimui. Jis turėtų būti grynoji (pure) „props“ ir būsenos funkcija.
• componentDidMount(): Iškviečiamas iškart po to, kai komponentas yra prijungiamas (įterpiamas į medį). Tai gera vieta atlikti šalutinius efektus, tokius kaip duomenų gavimas ar prenumeratų nustatymas.
• shouldComponentUpdate(nextProps, nextState): Iškviečiamas prieš atvaizdavimą, kai gaunami nauji „props“ ar būsena. Jis leidžia optimizuoti našumą, išvengiant nereikalingų pervaizdavimų. Turėtų grąžinti true, jei komponentas turėtų atsinaujinti, arba false, jei ne.
• getSnapshotBeforeUpdate(prevProps, prevState): Iškviečiamas prieš pat DOM atnaujinimą. Naudinga užfiksuoti informaciją iš DOM (pvz., slinkties poziciją) prieš jai pasikeičiant. Grąžinama vertė bus perduota kaip parametras į componentDidUpdate().
• componentDidUpdate(prevProps, prevState, snapshot): Iškviečiamas iškart po atnaujinimo. Tai gera vieta atlikti DOM operacijas po to, kai komponentas buvo atnaujintas.
• componentWillUnmount(): Iškviečiamas prieš pat komponento išmontavimą ir sunaikinimą. Tai gera vieta išvalyti resursus, tokius kaip įvykių klausytojų (event listeners) pašalinimas ar tinklo užklausų atšaukimas.
• static getDerivedStateFromError(error): Iškviečiamas po klaidos atvaizdavimo metu. Jis gauna klaidą kaip argumentą ir turėtų grąžinti vertę būsenai atnaujinti. Tai leidžia komponentui parodyti atsarginę vartotojo sąsają.
• componentDidCatch(error, info): Iškviečiamas po klaidos atvaizdavimo metu, įvykusios paveldėtame komponente. Jis gauna klaidą ir informaciją apie komponentų dėklą (stack) kaip argumentus. Tai gera vieta registruoti klaidas klaidų ataskaitų tarnyboje.

Gyvavimo Ciklo Metodų Pavyzdys Veikime

Apsvarstykite komponentą, kuris gauna duomenis iš API, kai yra prijungiamas, ir atnaujina duomenis, kai pasikeičia jo „props“:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>Loading...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

Šiame pavyzdyje:

• componentDidMount() gauna duomenis, kai komponentas yra pirmą kartą prijungiamas.
• componentDidUpdate() gauna duomenis iš naujo, jei pasikeičia url savybė.
• render() metodas rodo įkėlimo pranešimą, kol duomenys yra gaunami, ir tada atvaizduoja duomenis, kai jie tampa prieinami.

Gyvavimo Ciklo Metodai ir Klaidų Apdorojimas

„React“ taip pat teikia gyvavimo ciklo metodus klaidoms, kurios įvyksta atvaizdavimo metu, apdoroti:

• static getDerivedStateFromError(error): Iškviečiamas po klaidos atvaizdavimo metu. Jis gauna klaidą kaip argumentą ir turėtų grąžinti vertę būsenai atnaujinti. Tai leidžia komponentui parodyti atsarginę vartotojo sąsają.
• componentDidCatch(error, info): Iškviečiamas po klaidos, įvykusios atvaizdavimo metu paveldėtame komponente. Jis gauna klaidą ir informaciją apie komponentų dėklą kaip argumentus. Tai gera vieta registruoti klaidas klaidų ataskaitų tarnyboje.

Šie metodai leidžia jums sklandžiai apdoroti klaidas ir apsaugoti savo programą nuo sutrikimų. Pavyzdžiui, galite naudoti getDerivedStateFromError(), kad parodytumėte klaidos pranešimą vartotojui, ir componentDidCatch(), kad užregistruotumėte klaidą serveryje.

„Hooks“ ir Funkciniai Komponentai

„React Hooks“, pristatyti „React 16.8“ versijoje, suteikia būdą naudoti būseną ir kitas „React“ funkcijas funkciniuose komponentuose. Nors funkciniai komponentai neturi gyvavimo ciklo metodų taip, kaip klasių komponentai, „Hooks“ suteikia lygiavertį funkcionalumą.

• useState(): Leidžia pridėti būseną funkciniams komponentams.
• useEffect(): Leidžia atlikti šalutinius efektus funkciniuose komponentuose, panašiai kaip componentDidMount(), componentDidUpdate() ir componentWillUnmount().
• useContext(): Leidžia pasiekti „React“ kontekstą.
• useReducer(): Leidžia valdyti sudėtingą būseną naudojant reduktoriaus (reducer) funkciją.
• useCallback(): Grąžina atmintyje išsaugotą (memoized) funkcijos versiją, kuri keičiasi tik tada, kai pasikeičia viena iš priklausomybių.
• useMemo(): Grąžina atmintyje išsaugotą vertę, kuri perskaičiuojama tik tada, kai pasikeičia viena iš priklausomybių.
• useRef(): Leidžia išsaugoti vertes tarp atvaizdavimų.
• useImperativeHandle(): Pritaikoma egzemplioriaus vertė, kuri yra prieinama tėviniams komponentams naudojant ref.
• useLayoutEffect(): useEffect versija, kuri sinchroniškai paleidžiama po visų DOM mutacijų.
• useDebugValue(): Naudojama vertei rodyti pasirinktiniams „hooks“ „React DevTools“ įrankiuose.

useEffect Hook Pavyzdys

Štai kaip galite naudoti useEffect() „Hook“, kad gautumėte duomenis funkciniame komponente:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, [url]); // Only re-run the effect if the URL changes

  if (!data) {
    return <p>Loading...</p>;
  }

  return <div>{data.message}</div>;
}

Šiame pavyzdyje:

• useEffect() gauna duomenis, kai komponentas yra pirmą kartą atvaizduojamas ir kai pasikeičia url savybė.
• Antrasis useEffect() argumentas yra priklausomybių masyvas. Jei pasikeičia kuri nors iš priklausomybių, efektas bus paleistas iš naujo.
• useState() „Hook“ naudojamas komponento būsenai valdyti.

„React“ Atvaizdavimo Našumo Optimizavimas

Efektyvus atvaizdavimas yra labai svarbus kuriant našias „React“ programas. Štai keletas metodų, kaip optimizuoti atvaizdavimo našumą:

1. Nereikalingų Pervaizdavimų Prevencija

Vienas efektyviausių būdų optimizuoti atvaizdavimo našumą yra išvengti nereikalingų pervaizdavimų. Štai keletas metodų, kaip išvengti pervaizdavimų:

• Naudojant React.memo(): React.memo() yra aukštesnės eilės komponentas, kuris išsaugo atmintyje funkcinį komponentą. Jis pervaizduoja komponentą tik tada, kai pasikeičia jo „props“.
• Įgyvendinant shouldComponentUpdate(): Klasių komponentuose galite įgyvendinti shouldComponentUpdate() gyvavimo ciklo metodą, kad išvengtumėte pervaizdavimų, atsižvelgiant į „props“ ar būsenos pasikeitimus.
• Naudojant useMemo() ir useCallback(): Šie „Hooks“ gali būti naudojami vertėms ir funkcijoms išsaugoti atmintyje, taip išvengiant nereikalingų pervaizdavimų.
• Naudojant nekintamas duomenų struktūras: Nekintamos duomenų struktūros užtikrina, kad duomenų pakeitimai sukuria naujus objektus, o ne modifikuoja esamus. Tai palengvina pakeitimų aptikimą ir nereikalingų pervaizdavimų prevenciją.

2. Kodo Padalijimas (Code-Splitting)

Kodo padalijimas yra procesas, kurio metu jūsų programa padalijama į mažesnes dalis, kurias galima įkelti pagal poreikį. Tai gali žymiai sumažinti pradinį jūsų programos įkėlimo laiką.

„React“ suteikia keletą būdų, kaip įgyvendinti kodo padalijimą:

• Naudojant React.lazy() ir Suspense: Šios funkcijos leidžia dinamiškai importuoti komponentus, įkeliant juos tik tada, kai jie yra reikalingi.
• Naudojant dinaminius importus: Galite naudoti dinaminius importus moduliams įkelti pagal poreikį.

3. Sąrašų Virtualizacija

Atvaizduojant didelius sąrašus, visų elementų atvaizdavimas vienu metu gali būti lėtas. Sąrašų virtualizacijos metodai leidžia atvaizduoti tik tuos elementus, kurie šiuo metu yra matomi ekrane. Vartotojui slenkant, nauji elementai yra atvaizduojami, o seni – išmontuojami.

Yra keletas bibliotekų, kurios teikia sąrašų virtualizacijos komponentus, pavyzdžiui:

• react-window
• react-virtualized

4. Paveikslėlių Optimizavimas

Paveikslėliai dažnai gali būti reikšmingas našumo problemų šaltinis. Štai keletas patarimų, kaip optimizuoti paveikslėlius:

• Naudokite optimizuotus paveikslėlių formatus: Naudokite formatus, tokius kaip WebP, geresniam suspaudimui ir kokybei.
• Keiskite paveikslėlių dydį: Pakeiskite paveikslėlių dydį iki tinkamų matmenų pagal jų rodymo dydį.
• Atidėtas paveikslėlių įkėlimas (Lazy loading): Įkelkite paveikslėlius tik tada, kai jie yra matomi ekrane.
• Naudokite CDN: Naudokite turinio pristatymo tinklą (CDN), kad paveikslėliai būtų pateikiami iš serverių, kurie geografiškai yra arčiau jūsų vartotojų.

5. Profiliavimas ir Derinimas

„React“ teikia įrankius atvaizdavimo našumo profiliavimui ir derinimui. „React Profiler“ leidžia įrašyti ir analizuoti atvaizdavimo našumą, nustatant komponentus, kurie sukelia našumo problemas.

„React DevTools“ naršyklės plėtinys teikia įrankius „React“ komponentų, būsenos ir „props“ tikrinimui.

Praktiniai Pavyzdžiai ir Geriausios Praktikos

Pavyzdys: Funkcinio Komponento Išsaugojimas Atmintyje (Memoization)

Apsvarstykite paprastą funkcinį komponentą, kuris rodo vartotojo vardą:

function UserProfile({ user }) {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
}

Kad šis komponentas nebūtų pervaizduojamas be reikalo, galite naudoti React.memo():

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
});

Dabar UserProfile bus pervaizduojamas tik tada, jei pasikeis user savybė.

Pavyzdys: Naudojant useCallback()

Apsvarstykite komponentą, kuris perduoda atgalinio iškvietimo (callback) funkciją paveldėtam komponentui:

import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

Šiame pavyzdyje handleClick funkcija yra sukuriama iš naujo kiekvieną kartą, kai atvaizduojamas ParentComponent. Dėl to ChildComponent pervaizduojamas be reikalo, net jei jo „props“ nepasikeitė.

Norėdami to išvengti, galite naudoti useCallback(), kad išsaugotumėte handleClick funkciją atmintyje:

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Only re-create the function if the count changes

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

Dabar handleClick funkcija bus sukurta iš naujo tik tada, jei pasikeis count būsena.

Pavyzdys: Naudojant useMemo()

Apsvarstykite komponentą, kuris apskaičiuoja išvestinę vertę pagal savo „props“:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Šiame pavyzdyje filteredItems masyvas yra perskaičiuojamas kiekvieną kartą, kai atvaizduojamas MyComponent, net jei items savybė nepasikeitė. Tai gali būti neefektyvu, jei items masyvas yra didelis.

Norėdami to išvengti, galite naudoti useMemo(), kad išsaugotumėte filteredItems masyvą atmintyje:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // Only re-calculate if the items or filter changes

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Dabar filteredItems masyvas bus perskaičiuojamas tik tada, kai pasikeis items savybė arba filter būsena.

Išvada

„React“ atvaizdavimo proceso ir komponentų gyvavimo ciklo supratimas yra būtinas kuriant našias ir lengvai prižiūrimas programas. Naudodami tokius metodus kaip išsaugojimas atmintyje (memoization), kodo padalijimas ir sąrašų virtualizacija, programuotojai gali optimizuoti atvaizdavimo našumą ir sukurti sklandžią bei greitai reaguojančią vartotojo patirtį. Įdiegus „Hooks“, būsenos ir šalutinių efektų valdymas funkciniuose komponentuose tapo paprastesnis, dar labiau padidindamas „React“ programavimo lankstumą ir galią. Nesvarbu, ar kuriate mažą interneto programą, ar didelę verslo sistemą, „React“ atvaizdavimo koncepcijų įvaldymas žymiai pagerins jūsų gebėjimą kurti aukštos kokybės vartotojo sąsajas.

Papildomi Ištekliai

• „React“ Dokumentacija apie Elementų Atvaizdavimą
• „React“ Dokumentacija apie Būseną ir Gyvavimo Ciklą
• „React“ Dokumentacija apie „Hooks“
• „React“ Dokumentacija apie Našumo Optimizavimą